<template>
	<div class="edit-phone">
		<ul>
			<li>
				<input :value="forms.password" v-on:input="formsChange('password')" ref="password" type="password" placeholder="密码" />
				<span :class="[clears['password']?'active':'','clear']" @click.stop="clear('password')"></span>
			</li>
		</ul>
		<ul>
			<li>
				<input :value="forms.phone" v-on:input="formsChange('phone')" ref="phone" type="text" placeholder="手机号" />
				<span :class="[clears['phone']?'active':'','clear']" @click.stop="clear('phone')"></span>
			</li>
			<li class="validate">
				<input :value="forms.validate" v-on:input="formsChange('validate')" ref="validate" type="text" placeholder="验证码" />
				<span :class="[clears['validate']?'active':'','clear']" @click.stop="clear('validate')"></span>
				<span :class="[validateBan?'ban':'','btn']" @click="send()">{{validateText}}</span>
			</li>
		</ul>
		<div class="ctl-cont">
			<button @click="submit" :class="submitStatus?'active':''">保存</button>
		</div>
    </div>
</template>

<script>
	import http from '../services/http';
	import { mapState } from 'vuex';
	
	export default {
		name: 'edit-phone',
    	data:function(){
    		return{
    			pwdStatus:false,
    			validateBan:false,
    			submitStatus:false,
    			validateText:"获取验证码",
    			forms:{},
    			clears:{}
    		}
    	},
    	computed: {
		    ...mapState({
		        userinfo:state => state.user.userinfo,
		    })
		},
		props:['toast'],
    	methods:{
    		checkBtn(){//检查注册表是否全部输入
    			let self = this;
    			if(this.timeout)clearTimeout(this.timeout);
    			this.timeout = setTimeout(function(){
					let status = true;
					const config = ['password','phone','validate'];
					config.forEach(item => {
						if(!self.forms[item] || self.forms[item].length<=0){
							status = false;
						}
					});
					self.submitStatus = status;
				},300);
    		},
    		formsChange(key){
    			const cur = this.$refs[key].value;
    			this.forms[key] = cur;
    			this.clears[key] = cur.length>0 ? true : false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    		clear(key){
    			this.forms[key] = '';
    			this.clears[key] = false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    		send(){
    			if(!this.validateBan){
    				let self = this;
    				let {toast, forms,} = this;
    				if(!(/^1[34578]\d{9}$/.test(this.forms.phone))){ 0
				        toast("手机号码有误!");  
				        return false; 
				    }
    				http.post("/isp/api/v1/public/user/sendSms",{
	    				mobile: forms.phone,
	    				type: "EDIT"
	    			},redata => {
	    				toast(redata.message);
	    				if(!redata.success){return false;}
	    				let count = 60;
	    				self.validateBan = true;
	    				self.validateText = `已发送(${count}s)`;
	    				const countDown = setInterval(function(){
	    					if(count<=0){
	    						clearInterval(countDown);
	    						self.validateText = "重新发送";
	    						self.validateBan = false;
	    					}else{
	    						self.validateText = `已发送(${--count}s)`;
	    					}
	    				},1000)
	    			});
    			}
    		},
    		submit(){
    			if(!this.submitStatus)return false;
    			const {toast, forms, $router, userinfo} = this;
    			
    			
    			http.post("/isp/api/v1/protected/user/editMobile",{
				   "code": forms.validate,
				   "newMobile": forms.phone,
				   "oldMobile": userinfo.mobile,
				   "password": forms.password,
				   "type": "EDIT",
				},function(data){
					if(data.success){
						toast(data.message);
						$router.push({ path: '/login' });
					}else{
						toast(data.message);
					}
				});
    			
    			
    			
    			/*
    			
    			http.post("/isp/api/v1/public/user/verifySmsCode",{
    				code: forms.validate,
    				mobile: forms.phone,
    				type: "EDIT",
    			},redata=>{
    				if(redata.success && redata.data.flag){
						http.post("/isp/api/v1/protected/user/editMobile",{
						   "oldMobile": userinfo.mobile,
						   "newMobile": forms.phone,
						   "password": forms.password,
						},function(data){
							if(data.success){
								toast(data.message);
								$router.push({ path: '/login' });
							}else{
								toast(data.message);
							}
						});
					}else{
    					toast(redata.message);
    				}
    			})*/
    			
    		}
    	}
    };
    
    
    
</script>
<style lang="css">

.edit-phone{ 
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	font-size: 1rem;
	border-top: 1px #f5f5f5;
}
.edit-phone ul{
	background: #ffffff;
	margin-top: 10px;
	padding: 0 20px;
	width: 100%;
	float: left;
}

.edit-phone li{
	position: relative;
	height: 51px;
	padding-bottom: 15px;
	padding-top: 15px;
}
.edit-phone li:nth-of-type(1){
	border-bottom: solid 1px #e6e6e6;
}
.edit-phone li:last-child{
	border-bottom: none;
}
.edit-phone li.last{
	border-bottom: none;
}
.edit-phone li .icon{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 30px;
}
.edit-phone li input{
	width: 100%;
	border: none;
	height: 100%;
	background: #ffffff;
	line-height: 20px;
	font-size: 1rem;
	padding: 0 26px 0 0;
}
.edit-phone li .clear{
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 26px;
	cursor: pointer;
	background: transparent url(../assets/img/icon/input-clear.png) no-repeat center / auto 11px;
}
.edit-phone li.validate .clear{
	right: 100px;
}
.edit-phone li .clear.active{
	display: block;
}
.edit-phone li.validate{
	padding-right: 95px;
}
.edit-phone li .btn{
	position: absolute;
	right: 0;
	top: 12px;
	border-radius: 4px;
	padding: 0 8px;
	color: #4cb0b6;
	height: 28px;
	line-height: 28px;
	cursor: pointer;
	border: solid 1px #4cb0b6;
}
.edit-phone li .btn.ban{
	color: #cccccc;
	border: solid 1px #cccccc;
}
.edit-phone button{
	font-size: 1rem;
	text-align: center;
	line-height: 50px;
	height: 50px;
	width: 100%;
	background: #2dbe60;
	border-radius: 4px;
	color: rgba(225,225,225,0.7);
}
.edit-phone button.active{
	color: #ffffff;
}

.edit-phone .ctl-cont{
	margin-top: 10px;
	width: 100%;
	float: left;
}
.edit-phone .ctl-cont p{
	padding: 10px 20px;
	color: #666667;
}
.edit-phone .ctl-cont button{
	background: #ffffff;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 100%;
	color: rgba(45,190,96,0.5);
	font-size: 1rem;
}
.edit-phone .ctl-cont button.active{
	color: #2dbe60;
	color: rgba(45,190,96,1);
}



</style>
